<!--
 * @Author: your name
 * @Date: 2022-03-01 09:31:37
 * @LastEditTime: 2022-05-14 10:15:57
 * @LastEditors: 血雪球 wash0226@outlook.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \trace-source-web\src\views\trace-source-manage\traceability-information-supplement\index.vue
// 溯源信息录入
-->
<template>
  <baseMainSlot :show-tab="true">
    <template v-slot:btn-box>
      <!-- <div class="action-bar"> -->
      <ActionBar
        :page-no="86"
        :add-active="addActive"
        :del-active="delActive"
        :edit-active="editActive"
        :has-cancel="false"
        :has-save="false"
        @add="add"
        @cancel="cancel('formData')"
        @edit="edit"
        @del="del"
        @save="save"
      />
      <!-- </div> -->
    </template>
    <template v-slot:tab-select>
      <selectbutton
        :buttonselectlist="buttonselectlist"
        @nowselectbuttonindex="nowselectbuttonindex"
      />
    </template>
    <template v-slot:dialog>
      <el-dialog
        :title="titleText + '溯源信息'"
        :visible.sync="dialogFormVisible"
        :before-close="handleClose"
        top="0vh"
      >
        <el-form
          ref="formData"
          :model="formData"
          label-position="left"
          :rules="rules"
          class="w100p"
        >
          <el-form-item
            label="主体名称: "
            prop="artificialOrganizationNo"
            class="w32p"
          >
            <el-select
              v-model="formData.artificialOrganizationNo"
              :disabled="!canInput"
              filterable
              @change="ficialIon"
            >
              <el-option
                v-for="item in organizatList"
                :key="item.artificialOrganizationNo"
                :label="item.organizationName"
                :value="item.artificialOrganizationNo"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="formData.contact" label="联系人: " prop="contact" class="w32p">
            <el-input
              v-model="formData.contact"
              :disabled="!canInput"
              clearable
            />
          </el-form-item>
          <el-form-item v-if="formData.plantAddress" label="地址: " prop="plantAddress" class="w32p">
            <el-input
              v-model="formData.plantAddress"
              :disabled="!canInput"
              clearable
            />
          </el-form-item>
          <el-divider />
          <h3 class="text-left">产品信息：</h3>
          <el-form-item label="批次名称: " prop="batchName" class="w32p">
            <el-input
              v-model="formData.batchName"
              :disabled="!canInput"
              clearable
            />
          </el-form-item>
          <el-form-item label="产品编号: " prop="batchNo" class="w32p">
            <el-input
              v-model="formData.batchNo"
              :disabled="!canInput"
              clearable
            />
          </el-form-item>
          <el-form-item label="种养种类: " prop="plantingTypeName" class="w32p">
            <el-input
              v-model="formData.plantingTypeName"
              :disabled="!canInput"
              clearable
            />
          </el-form-item>
          <el-form-item label="种养品种: " prop="varietyName" class="w32p">
            <el-input
              v-model="formData.varietyName"
              :disabled="!canInput"
              clearable
            />
          </el-form-item>
          <el-form-item label="种养面积: " prop="area" class="w32p">
            <el-input v-model="formData.area" :disabled="!canInput" clearable />
          </el-form-item>
          <el-form-item label="面积单位: " prop="areaUnit" class="w32p">
            <el-input
              v-model="formData.areaUnit"
              :disabled="!canInput"
              clearable
            />
          </el-form-item>
          <el-form-item label="产品图片: " class="w32p">
            <uploadimage
              :can-input="canInput"
              :post-url="InImgUrl"
              @child-event="setimgurl"
              @ika-img="setimgname"
            />
          </el-form-item>
          <el-divider />
          <h3 class="text-left">检测报告：</h3>
          <el-form-item label="添加报告图片: " class="w100p">
            <el-upload
              :disabled="!canInput"
              action="#"
              :auto-upload="false"
              accept="image/*"
              style="display: inline-block;"
              multiple
              list-type="picture-card"
              :file-list="fileList"
              :on-change="fileChange"
              :on-remove="fileRemove"
              :on-exceed="fileExceede"
              :on-preview="handlePictureCardPreview"
              :limit="8"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-divider />
          <el-row>
            <p class="text-left">添加农资信息：</p>
            <el-table
              ref="AgriculturalData"
              :data="AgriculturalData"
              tooltip-effect="dark"
              highlight-current-row
              border
              stripe
              class="AgriculturalData"
              height="268"
              @selection-change="agriculturalSelectRow"
            >
              <el-table-column type="index" label="序号" width="60" />
              <el-table-column
                label="农资类型名称"
                prop="agriculturalMaterialTypeName"
                align="center"
                min-width="120"
              >
                <template slot-scope="scope">
                  <el-input
                    v-if="canInput"
                    v-model="scope.row.agriculturalMaterialTypeName"
                    :disabled="!canInput"
                  />
                  <span v-else>{{
                    scope.row.agriculturalMaterialTypeName
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="农资名称"
                prop="agriculturalMaterialName"
                align="center"
                min-width="120"
              >
                <template slot-scope="scope">
                  <el-input
                    v-if="canInput"
                    v-model="scope.row.agriculturalMaterialName"
                    :disabled="!canInput"
                  />
                  <span v-else>{{ scope.row.agriculturalMaterialName }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="投入量-单位"
                prop="assetQuantity"
                min-width="95"
              >
                <template slot-scope="scope">
                  <el-input
                    v-if="canInput"
                    v-model="scope.row.assetQuantity"
                    class="w50p"
                  /><span v-if="canInput">-</span>
                  <el-input
                    v-if="canInput"
                    v-model="scope.row.symbol"
                    :disabled="!canInput"
                    placeholder=""
                    class="w32p"
                  />
                  <span v-else>
                    {{ scope.row.assetQuantity }} {{ scope.row.symbol }}
                  </span>
                </template>
              </el-table-column>

              <el-table-column
                label="标准亩均用量-单位/面积单位"
                prop="ratedQuantity"
                min-width="200"
              >
                <template slot-scope="scope">
                  <el-input
                    v-if="canInput"
                    v-model="scope.row.ratedQuantity"
                    :disabled="!canInput"
                    class="total w50p"
                  />
                  <span v-if="canInput">-</span>
                  <el-input
                    v-if="canInput"
                    v-model="scope.row.ratedQuantityUnitName"
                    :disabled="!canInput"
                    class="total w15p"
                  />
                  <span v-if="canInput">/</span>
                  <el-input
                    v-if="canInput"
                    v-model="scope.row.perQuantityUnitName"
                    class="total w15p"
                    :disabled="!canInput"
                  />
                  <span v-else>
                    {{
                      scope.row.ratedQuantity }}
                    {{ scope.row.ratedQuantityUnitName }}
                    <span v-if="scope.row.ratedQuantityUnitName&&scope.row.perQuantityUnitName">/</span>
                    {{
                      scope.row.perQuantityUnitName
                    }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="作业日期" prop="assetDate" width="200">
                <template slot-scope="scope">
                  <el-date-picker
                    v-if="canInput"
                    v-model="scope.row.assetDate"
                    type="datetime"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :disabled="!canInput"
                  />
                  <span v-else> {{ scope.row.assetDate }} </span>
                </template>
              </el-table-column>

              <el-table-column v-if="canInput" label="操作" width="80">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    style="color:red;text-decoration: underline;"
                    :disabled="!canInput"
                    size="small"
                    @click.native.prevent="
                      deleteAgriculturalRow(scope.$index, AgriculturalData)
                    "
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
              <template slot="empty">
                <div>请添加数据</div>
              </template>
            </el-table>
          </el-row>
          <el-row v-if="canInput">
            <el-button
              type="info"
              plain
              :disabled="!canInput"
              icon="el-icon-circle-plus-outline"
              class="addInfo w100p"
              @click="addAgriculturalButInfo"
            >添加</el-button>
          </el-row>
          <el-divider />
          <el-row>
            <p class="text-left">添加农事信息：</p>
            <el-table
              ref="FarmingData"
              :data="FarmingData"
              tooltip-effect="dark"
              highlight-current-row
              border
              stripe
              class="FarmingData"
              height="268"
              @selection-change="farmingSelectRow"
            >
              <el-table-column type="index" label="序号" width="60" />
              <el-table-column
                label="农事作业名称"
                prop="agriculturalWorkTypeName"
                align="center"
                min-width="200"
              >
                <template slot-scope="scope">
                  <el-input
                    v-if="canInput"
                    v-model="scope.row.agriculturalWorkTypeName"
                    :disabled="!canInput"
                  />
                  <span v-else> {{ scope.row.agriculturalWorkTypeName }} </span>
                </template>
              </el-table-column>

              <el-table-column
                label="投入农资名称"
                min-width="75"
                prop="agriculturalMaterialName"
              >
                <template slot-scope="scope">
                  <el-input
                    v-if="canInput"
                    v-model="scope.row.agriculturalMaterialName"
                    :disabled="!canInput"
                    placeholder=""
                  />
                  <span v-else> {{ scope.row.agriculturalMaterialName }} </span>
                </template>
              </el-table-column>

              <el-table-column label="执行人" prop="operator" min-width="95">
                <template slot-scope="scope">
                  <el-input
                    v-if="canInput"
                    v-model="scope.row.operator"
                    :disabled="!canInput"
                  />
                  <span v-else> {{ scope.row.operator }} </span>
                </template>
              </el-table-column>

              <el-table-column
                label="投入量-单位"
                prop="investmentVolume"
                min-width="95"
              >
                <template slot-scope="scope">
                  <el-input
                    v-if="canInput"
                    v-model="scope.row.investmentVolume"
                    :disabled="!canInput"
                    class="w50p"
                  />
                  <span v-if="canInput">-</span>
                  <el-input
                    v-if="canInput"
                    v-model="scope.row.unitName"
                    :disabled="!canInput"
                    class="total w32p"
                  />
                  <span v-else>
                    {{ scope.row.investmentVolume }}{{ scope.row.unitName }}
                  </span>
                </template>
              </el-table-column>

              <el-table-column
                label="作业面积-单位"
                prop="workArea"
                min-width="95"
              >
                <template slot-scope="scope">
                  <el-input
                    v-if="canInput"
                    v-model="scope.row.workArea"
                    :disabled="!canInput"
                    class="total w50p"
                  />
                  <span v-if="canInput">-</span>
                  <el-input
                    v-if="canInput"
                    v-model="scope.row.areaUnit"
                    :disabled="!canInput"
                    class="total w32p"
                  />
                  <span v-else>
                    {{ scope.row.workArea }} {{ scope.row.areaUnit }}
                  </span>
                </template>
              </el-table-column>

              <el-table-column
                label="作业日期"
                prop="execEndTime"
                min-width="95"
              >
                <template slot-scope="scope">
                  <el-date-picker
                    v-if="canInput"
                    v-model="scope.row.execEndTime"
                    :disabled="!canInput"
                    type="datetime"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期时间"
                  />
                  <span v-else> {{ scope.row.execEndTime }} </span>
                </template>
              </el-table-column>

              <el-table-column v-if="canInput" label="操作" min-width="80">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    style="color:red;text-decoration: underline;"
                    :disabled="!canInput"
                    size="small"
                    @click.native.prevent="
                      deleteFarmingRow(scope.$index, FarmingData)
                    "
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
              <template slot="empty">
                <div>请添加数据</div>
              </template>
            </el-table>
          </el-row>
          <el-row v-if="canInput">
            <el-button
              type="info"
              plain
              :disabled="!canInput"
              icon="el-icon-circle-plus-outline"
              class="addInfo w100p"
              @click="addFarmingButInfo"
            >添加</el-button>
          </el-row>
        </el-form>
        <span v-if="canInput" slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="cancel('formData')">取 消</el-button>
          <el-button class="zh-button-two" type="primary" @click="save('formData')">{{
            titleText
          }}</el-button>
        </span>
      </el-dialog>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </template>
    <template v-slot:search-box>
      <SearchBox @search="search">
        <div class="common-search-item">
          <div class="label">批次名称:</div>
          <div class="input">
            <el-input
              v-model="batchName"
              placeholder="请输入批次名称"
              clearable
            />
          </div>
        </div>
        <div class="common-search-item">
          <div class="label">种养类别:</div>
          <div class="input">
            <el-input
              v-model="plantingTypeName"
              placeholder="请输入种养类别"
              clearable
            />
          </div>
        </div>
        <div class="common-search-item">
          <div class="label">种养品种:</div>
          <div class="input">
            <el-input
              v-model="varietyName"
              placeholder="请输入种养品种"
              clearable
            />
          </div>
        </div>
      </SearchBox>
    </template>
    <template v-slot:table-box>
      <el-table
        ref="tableData"
        v-loading="loading"
        highlight-current-row
        :data="tableData"
        stripe
        border
        height="92%"
        @row-click="handleEdit"
        @row-dblclick="handledbEdit"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="60" />
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="batchName" label="批次名称" min-width="180" />
        <el-table-column prop="batchNo" label="批次编码" min-width="100" />
        <el-table-column
          prop="plantingTypeName"
          label="种养类别"
          min-width="100"
        />
        <el-table-column prop="varietyName" label="种养品种" min-width="100" />
        <el-table-column prop="area" label="种养面积" min-width="100">
          <template v-if="scope.row.area" slot-scope="scope">
            {{ scope.row.area }}  {{ scope.row.areaUnit }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作">
          <template v-if="scope.row.batchName" slot-scope="scope">
            <el-button
              type="warning"
              plain
              @click="showcodeview(scope.row.traceSource)"
            >农事</el-button>
            <el-button
              type="warning"
              plain
              @click="showcodeview(scope.row.traceSource)"
            >农资</el-button>
          </template>
        </el-table-column> -->
        <el-table-column label="查看详情">
          <template v-if="scope.row.batchName" slot-scope="scope">
            <el-button
              type="warning"
              plain
              @click.stop="showcodeview(scope.row)"
            >查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :page-size="pagmes.pageSize"
        :current-page="pagmes.currentPage"
        :total-size="pagmes.totalSize"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
      />

    </template>
  </baseMainSlot>
</template>
<script>
import baseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot";
import Pagination from "@/components/Pagination";
import ActionBar from "@/components/ActionBar";
// import uploadimage from "@/components/uploadimage/uploadimage.vue";
import selectbutton from "@/components/selectbutton/index.vue";
// import axios from "axios";
// import vueQr from "vue-qr";
import { getToken } from "@/utils/auth";
import { mymixin } from "@/utils/mixin";
import SearchBox from "@/components/SearchBox";
// const cityOptions = this.batchList;
import subjectApi from "@/api/basic-info-manage/subject-information-management.js";
import informationApi from "@/api/trace-source-web/manual-traceability-information-management/traceability-information-entry.js";
import uploadimage from "@/components/uploadimage/uploadimages.vue";

export default {
  name: "TraceabilityInformationEntry",
  components: {
    // vueQr,
    baseMainSlot,
    Pagination,
    uploadimage,
    selectbutton,
    ActionBar,
    SearchBox
  },
  mixins: [mymixin],
  data() {
    return {
      loading: false,
      // 输入框是否可修改true为可修改
      canInput: false,
      // 添加删除修改状态---主要通过此状态来判断调用方法
      nowChanceStau: "",
      // 操作按钮的逻辑及展示数据
      addActive: true,
      delActive: false,
      saveActive: false,
      cancelActive: false,
      editActive: false,
      dialogFormVisible: false,
      isshowcodeview: false,
      tableData: [],
      image: null,
      imgurl: "",
      headers: {
        databaseName: getToken("databaseName"),
        accessToken: getToken("token"),
        organizationList: getToken("organizationList"),
        organizationNo: getToken("organizationNo")
      },
      dataImg: {
        organizationNo: getToken("organizationNo")
      },
      searchbatchId: "", // 顶部框批次
      batchName: "",
      buttonselectlist: [
        // { name: "生产管理系统" }, { name: "加工管理系统" }
      ],
      topitemtypeid: 0,
      isshowview: false,
      addlist: {
        artificialProductionBaseInfoNo: "",
        brand: "",
        // organizationNo: 0,
        originPlace: "", // 产地
        plantPlace: "", // 种养地址
        productGrade: "", // 产品等级
        productNumber: "", // 产品编号
        sellingTime: "", // 出售时间
        tracePicture: {
          data: ""
        }
      },
      nowimageurl: "",
      pagmes: {
        pageSize: 10,
        currentPage: 1,
        totalSize: 0
      },
      tracePictureId: 0,
      productionBaseInfoIdList: [],
      isIndeterminate: true,
      GroupHeight: "100px",
      checkboxName: "展开",
      // 表格index
      agriculturalSelectlistRow: null,
      farmingSelectlistRow: null,
      AgriculturalData: [],
      FarmingData: [],
      // 主体
      organizatList: [],
      artificialProductionBaseInfoNoList: [],
      // 产品图片
      productPicture: "",
      InImgUrl: "",
      // 检测报告图片
      fileList: [],
      batchNo: '',
      varietyName: '',
      plantingTypeName: '',
      dialogImageUrl: "",
      dialogVisible: false,
      rules: {
        artificialOrganizationNo: [
          { required: true, message: "请选择主体信息", trigger: "change" }
        ],
        batchName: [
          { required: true, message: "请输入批次名称", trigger: "blur" }
        ],
        batchNo: [
          { required: true, message: '请输入产品编码', trigger: 'blur' }
        ],
        plantingTypeName: [
          { required: true, message: "请输入种养类别", trigger: "blur" }
        ],
        varietyName: [
          { required: true, message: "请输入种养品种", trigger: "blur" }
        ],
        area: [{ required: true, message: "请输入面积", trigger: "blur" }],
        areaUnit: [
          { required: true, message: "请输入面积单位", trigger: "blur" }
        ]
      }
    };
  },
  created() {},
  mounted() {
    this.getselect();
  },
  methods: {
    // 按钮当前选择index
    nowselectbuttonindex(i) {
      this.topitemtypeid = i;
      this.getTableDataList();
    },
    //   获取表格信息
    getTableDataList() {
      let params = {
        page: this.pagmes.currentPage,
        size: this.pagmes.pageSize,
        entity: {
          artificialProductionBaseInfoNo: this.searchbatchId,
          deleteFlag: false,
          batchName: this.batchName || undefined,
          batchNo: this.batchNo || undefined,
          varietyName: this.varietyName || undefined,
          plantingTypeName: this.plantingTypeName || undefined
        }
      };
      // let zhurl = this.$webReqUrl + "traceSource/trace/queryPageList";
      if (this.topitemtypeid === 0) {
        informationApi.artificialPageList(params).then(res => {
          this.tableData = res.data.content;
          // console.log(this.tableData)
          this.pagmes.totalSize = res.data.totalElements;
          this.addblankmet();
          this.resetActionBar();
          // console.log(res.data)
        });
      } else {
        this.tableData = [];
        this.addblankmet();
        this.pagmes.totalSize = 0;
      }
    },
    setimgurl(e) {
      if (e) {
        this.productPicture = e;
      }
    },
    setimgname(e) {
      this.formData.pictureName = e;
    },
    getselect() {
      subjectApi.traceByCondition({}).then(res => {
        this.organizatList = res.data;
      });
    },
    ficialIon(e) {
      this.organizatList.forEach(item => {
        console.log(item)
        if (e === item.artificialOrganizationNo) {
          this.$set(this.formData, 'contact', item.contact)
          this.$set(this.formData, 'plantAddress', item.plantAddress)
        }
      })
    },
    // 添加
    add() {
      this.canInput = true;
      this.nowChanceStau = "add";
      this.formData = {};
      this.image = "";
      this.InImgUrl = "";
      this.AgriculturalData = [];
      this.FarmingData = [];
      this.titleText = "添加";
      this.dialogFormVisible = true;
      this.addActive = false;
      this.delActive = false;
      this.saveActive = true;
      this.cancelActive = true;
      this.editActive = false;
    },
    // 修改
    edit() {
      this.nowChanceStau = "edit";
      this.titleText = "修改";
      this.dialogFormVisible = true;
      this.canInput = true;
      this.addActive = false;
      this.delActive = false;
      this.saveActive = true;
      this.cancelActive = true;
      this.editActive = false;
    },
    search() {
      this.currentPage = 1;
      this.getTableDataList();
    },
    changePageSize(pageSize) {
      this.pagmes.pageSize = pageSize;
      this.getTableDataList();
    },
    changeCurrentPage(currentPage) {
      this.pagmes.currentPage = currentPage;
      this.getTableDataList();
    },
    handleEdit(row) {
      // TODO 点击行元素后 edit
      this.formData = { ...row };
      informationApi
        .artificialProduction(row.artificialProductionBaseInfoNo)
        .then(res => {
          let data = res.data;
          if (data) {
            this.AgriculturalData = data.artificialAgriculturalInputsList;
            this.FarmingData = data.artificialFarmingOperationList;
          }
        });
      if (row.artificialProductionPicture !== undefined) {
        let artificialProductionPicture = row.artificialProductionPicture;
        this.InImgUrl = artificialProductionPicture.picture;
      } else {
        this.InImgUrl = "";
      }
      this.artificialImgList(row.artificialProductionBaseInfoNo, "");
      this.addHide = true;
      this.addActive = true;
      this.editActive = true;
      this.saveActive = false;
      this.canInput = false;
      if (row.useFlag === true) {
        this.editActive = false;
      }
    },
    handledbEdit(row) {
      if (row.artificialProductionBaseInfoNo) {
        this.purchaseVisible = true;
      }
    },
    handleSelectionChange(list) {
      this.artificialProductionBaseInfoNoList = [];
      this.artificialProductionBaseInfoNoList = list.map(
        item => item.artificialProductionBaseInfoNo
      );
      if (this.artificialProductionBaseInfoNoList.length > 0) {
        this.delActive = true;
      } else this.delActive = false;
    },
    agriculturalSelectRow(val) {
      this.agriculturalSelectlistRow = val;
    },
    farmingSelectRow(val) {
      this.farmingSelectlistRow = val;
    },
    // 点击添加按按钮
    addAgriculturalButInfo() {
      // this.addHide = false;
      // var list = JSON.parse(JSON.stringify(this.addformData));
      let list = {
        agriculturalMaterialTypeName: "",
        agriculturalMaterialName: "",
        assetQuantity: "",
        symbol: "",
        ratedQuantity: "",
        perQuantityUnitName: "",
        ratedQuantityUnitName: "",
        assetDate: ""
      };
      this.AgriculturalData.unshift(list);
    },
    // 删除改行
    deleteAgriculturalRow(index, rows) {
      rows.splice(index, 1);
    },
    // 点击添加按按钮
    addFarmingButInfo() {
      let list = {
        agriculturalWorkTypeName: "",
        agriculturalMaterialName: "",
        investmentVolume: "",
        unitName: "",
        workArea: "",
        areaUnit: "",
        execEndTime: ""
      };
      this.FarmingData.unshift(list);
    },
    // 删除改行
    deleteFarmingRow(index, rows) {
      rows.splice(index, 1);
    },
    // 展示当前详细信息
    async showcodeview(e) {
      this.formData = { ...e };
      this.titleText = '查看'
      informationApi
        .artificialProduction(e.artificialProductionBaseInfoNo)
        .then(res => {
          let data = res.data;
          if (data) {
            this.AgriculturalData = data.artificialAgriculturalInputsList;
            this.FarmingData = data.artificialFarmingOperationList;
          }
          if (e.artificialProductionPicture !== undefined) {
            let artificialProductionPicture = e.artificialProductionPicture;
            this.InImgUrl = artificialProductionPicture.picture;
          } else {
            this.InImgUrl = "";
          }
        });
      this.artificialImgList(e.artificialProductionBaseInfoNo, "");
      this.canInput = false;
      this.dialogFormVisible = true;
    },
    // 展示添加弹框
    showaddig() {
      if (this.topitemtypeid === 0) {
        this.isshowview = true;
      } else {
        this.$message.warning("暂无加工数据！！");
      }
    },
    // 填充表格空白行
    addblankmet() {
      let havline = this.tableData.length % this.pagmes.pageSize;
      if (this.tableData.length < this.pagmes.pageSize) {
        if (havline < this.pagmes.pageSize) {
          const remain = this.pagmes.pageSize - havline;
          for (var i = 0; i < remain; i++) {
            this.tableData.push({ index: i + this.tableData.length - 1 });
          }
        }
      }
    },
    delmessage() {
      informationApi
        .artificialDelList({
          artificialProductionBaseInfoNoList: this
            .artificialProductionBaseInfoNoList
        })
        .then(res => {
          if (res.code === 1) {
            this.$message.success(res.msg);
            this.getTableDataList();
            this.resetActionBar();
          } else {
            this.$message.warning(res.msg || "删除失败");
          }
        });
    },
    save(formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          if (this.nowChanceStau === "edit") {
            // 加入单个图片
            let artificialProductionPicture = { picture: this.productPicture };
            this.formData.artificialProductionPicture = artificialProductionPicture;
            informationApi.artificialEdit(this.formData).then(res => {
              if (res.code === 1) {
                // 修改农事，农资
                this.artificialProductionBaseInfo(
                  this.formData.artificialProductionBaseInfoNo
                );
                this.dialogFormVisible = false;
                // 添加
                if (this.fileList.length <= 0) return;
                this.submitUpload(
                  this.formData.artificialProductionBaseInfoNo,
                  "edit"
                );
                this.dialogFormVisible = false;
              } else {
                this.$message.error(res.msg || "修改失败！");
              }
            });
          } else if (this.nowChanceStau === "add") {
            let artificialProductionPicture = { picture: this.productPicture };
            this.formData.artificialProductionPicture = artificialProductionPicture;
            informationApi.artificialAdd(this.formData).then(res => {
              if (res.code === 1) {
                let artificialProductionBaseInfoNo =
                  res.data.artificialProductionBaseInfoNo;
                // 添加农事，农资
                this.artificialProductionBaseInfo(
                  artificialProductionBaseInfoNo
                );
                this.dialogFormVisible = false;
                if (this.fileList.length <= 0) return;
                this.submitUpload(res.data.artificialProductionBaseInfoNo, "add");
                this.dialogFormVisible = false;
              } else {
                this.$message.error(res.msg || "新增失败！");
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    // 检测文件变动获取文件
    fileChange(file, fileList) {
      this.fileList = fileList;
    },
    // 检测文件 删除
    fileRemove(file, fileList) {
      this.fileList = fileList;
    },
    fileExceede(file, fileList) {
      this.$message.warning("图片最多不能大于8张");
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 获取图片
    artificialImgList(e, edg) {
      subjectApi.artificialProductPictureQuery(e).then(res => {
        let data = res.data;
        data.forEach(item => {
          if (item.picture) {
            this.$set(item, "url", "data:image/png;base64," + item.picture);
          }
        });
        this.fileList = data;
      });
      if (edg === "dialog") {
        this.dialogzizhFormVisible = true;
      }
    },
    // 添加农资
    artificialProductionBaseInfo(e) {
      if (e) {
        let artificialFromData = {
          artificialProductionBaseInfoNo: e,
          artificialAgriculturalInputsList: this.AgriculturalData
        };
        // 添加农事
        informationApi
          .artificialAgriculturalAddList(artificialFromData)
          .then(res => {
            if (res.code === 1) {
              let ficialFarmFromData = {
                artificialProductionBaseInfoNo: e,
                artificialFarmingOperationList: this.FarmingData
              };
              informationApi
                .artificialFarmingAddList(ficialFarmFromData)
                .then(res => {
                  if (res.code === 1) {
                    // this.$message.success(res.msg || "新增成功！");
                  } else {
                    this.$message.error(res.msg || "新增失败！");
                  }
                });
            } else {
              this.$message.error(res.msg || "新增失败！");
            }
          });
      }
    },
    // 添加图片
    submitUpload(e, status) {
      let formData = new FormData(); //  将文件封装进FormData
      this.fileList.forEach((file, index) => {
        if (file.size !== undefined) {
          formData.append("multipartFile", file.raw);
        } else {
          var bytes = window.atob(file.url.split(",")[1]);
          var array = [];
          for (var i = 0; i < bytes.length; i++) {
            array.push(bytes.charCodeAt(i));
          }
          var blob = new Blob([new Uint8Array(array)], { type: file.type });
          formData.append("multipartFile", blob, file.pictureName);
        }
      });
      if (status === "edit") {
        formData.append("artificialProductionBaseInfoNo", e);
        subjectApi.productionPictureListEdit(formData).then(res => {
          if (res.code === 1) {
            this.dialogFormVisible = false;
            this.getTableDataList();
            this.$message.success("新增成功！");
          } else {
            this.$message.error(res.msg || "新增失败！");
          }
        });
      }
      if (status === "add") {
        formData.append("artificialProductionBaseInfoNo", e);
        subjectApi.productionPictureList(formData).then(res => {
          if (res.code === 1) {
            this.dialogFormVisible = false;
            this.getTableDataList();
            this.$message.success("新增成功！");
          } else {
            this.$message.error(res.msg || "新增失败！");
          }
        });
      }
    },
    // 点击展开
    checkboxHeight() {
      let GroupHeight = this.$refs.checkboxGroup.clientHeight;
      if (GroupHeight <= 120) {
        this.GroupHeight = "400px";
        this.checkboxName = "展开";
      } else {
        this.GroupHeight = "120px";
        this.checkboxName = "收起";
      }
      // return val
    },
    handleClose(done) {
      this.resetActionBar();
      done();
      // this.$confirm("确认关闭？")
      //   .then(_ => {
      //   })
      //   .catch(_ => {});
    },
    // 初始化操作栏状态
    resetActionBar() {
      this.nowChanceStau = "";
      this.formData = {};
      this.fileList = [];
      this.image = "";
      this.pictureId = "";
      this.InImgUrl = "";
      this.canInput = false;
      this.dialogFormVisible = false;
      this.addActive = true;
      this.delActive = false;
      this.saveActive = false;
      this.cancelActive = false;
      this.editActive = false;
      this.AgriculturalData = [];
      this.FarmingData = [];
      this.productPicture = "";
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  color: #000 !important;
}
::v-deep .el-form-item__content {
  .el-input__inner {
    color: #000 !important;
  }
}
::v-deep.el-form-item--medium .el-form-item__content {
  display: flex;
}
::v-deep.el-select {
  width: 100%;
}
// .codeview {
//   ::v-deep.el-dialog {
//     height: 350px;
//   }
// }
::v-deep .el-dialog__footer {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
.zh-topview {
  width: 100%;
  height: 45px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  ::v-deep.el-select {
    width: 200px !important;
  }
  .topview-pici {
    margin-left: 10px;
    // background-color: aqua;
    line-height: 30px;
    display: flex;
    .topview-pici-title {
      min-width: 80px;
      height: 36px;
      line-height: 36px;
      text-align: end;
      padding-right: 10px;
    }
    .el-select {
      width: 300px !important;
    }
  }
}
// 头部添加
.action-bar {
  width: 100%;
  height: 50px;
  background-color: #00485a;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin-bottom: 10px;
  .btn-list {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    .btn-item {
      margin-right: 15px;
    }
  }
}

::v-deep .el-form-item.is-error {
  .el-form-item__content {
    border: .8px solid rgba(255, 0, 0, 0.667);
  }
}
::v-deep .el-dialog__wrapper {
  .el-dialog {
      height: 76vh;
      padding-bottom: 10vh;
      width: 70%;
    .el-dialog__body {
      height: 60vh;
      overflow-y: auto;
      .el-form {
        .checkbox {
          // background: #00000000;
          display: block;
          .el-form-item__content {
            width: 95%;
            margin-left: 5%;
            position: relative;
            .checkboxck {
              position: absolute;
              top: 20px;
              left: 22px;
              // .el-button {
              // }
              .el-button--medium {
                padding: 0;
              }
            }
            .el-checkbox__input.is-indeterminate {
              .el-checkbox__inner {
                background-color: rgba(0, 110, 145, 1);
                border-color: rgba(0, 110, 145, 1);
              }
              .el-checkbox__label {
                color: rgba(0, 110, 145, 1);
              }
            }
            .el-checkbox.is-checked {
              .el-checkbox__inner {
                background-color: rgba(0, 110, 145, 1);
                border-color: rgba(0, 110, 145, 1);
              }
              .el-checkbox__label {
                color: rgba(0, 110, 145, 1);
              }
            }
            .checkbox-group {
              padding-left: 66px;
              min-height: 120px;
              overflow-y: auto;
              .el-checkbox {
                padding: 2px 10px;
                border: 1px solid rgba(220, 223, 230, 1);
                border-radius: 5px;
                margin-bottom: 10px;
              }
              .el-checkbox.is-checked {
                border: 1px solid rgba(0, 110, 145, 1);
                .el-checkbox__label {
                  color: rgba(0, 110, 145, 1);
                }
              }
            }
          }
        }
      }
    }
  }
}
// 溯源码
.codeview {
  ::v-deep .el-dialog {
    width: 25% !important;
  }
}
::v-deep .el-upload--picture-card {
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid #6ecae3;
}
::v-deep .el-upload--picture-card {
  position: relative;
}
::v-deep .el-upload--picture-card .el-icon-plus {
  font-size: 34px;
  color: #6ecae3;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
::v-deep .el-dialog__body {
  text-align: center;
}
.el-upload__tip {
  font-size: 12px;
  color: #606266;
  margin-top: 7px;
  position: absolute;
  width: 150px;
}
</style>
